<!--
 * @Author: zhangfeng
 * @Date: 2023-12-15 09:26:34
 * @LastEditTime: 2024-01-09 16:00:28
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\views\menu\module\MenuDialog.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<el-dialog v-model="dialogVisible" :title="tips" width="30%">
		<el-form
			ref="ruleFormRef"
			:model="ruleForm"
			:rules="rules"
			label-width="120px"
			class="demo-ruleForm"
			:size="formSize"
			status-icon
		>
			<el-form-item label="上级目录" prop="parentId">
				<Tree
					style="width: 100%"
					v-if="dialogVisible"
					v-model="ruleForm.parentId"
				/>
			</el-form-item>
			<el-form-item label="菜单类型" prop="level">
				<el-select
					style="width: 100%"
					v-model="ruleForm.level"
					class="m-2"
					placeholder="请选择菜单类型"
					size="large"
				>
					<el-option
						v-for="item in levelOption"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item
				:label="
					ruleForm.level == 1
						? '目录名称'
						: ruleForm.level == 2
						  ? '菜单名称'
						  : ruleForm.level == 3
						    ? '按钮名称'
						    : '菜单名称'
				"
				prop="name"
			>
				<el-input v-model="ruleForm.name" />
			</el-form-item>
			<el-form-item v-if="ruleForm.level == 2" label="路由" prop="path">
				<el-input v-model="ruleForm.path" />
			</el-form-item>
			<el-form-item v-if="ruleForm.level == 2" label="组件" prop="components">
				<el-input v-model="ruleForm.components" />
			</el-form-item>
			<el-form-item v-if="ruleForm.level != 2" label="权限标识" prop="premi">
				<el-input v-model="ruleForm.premi" />
			</el-form-item>
			<el-form-item v-if="ruleForm.level != 3" label="图标" prop="icon">
				<!-- <el-select
					v-model="ruleForm.icon"
					class="m-2"
					placeholder="Select"
					size="large"
					style="display: flex; flex-direction: row"
				>
					<el-option
						v-for="item in IconOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
						<el-icon><Icon :size="24" :icon="item.value" /></el-icon>
					</el-option>
				</el-select> -->
				<div style="position: relative; width: 100%">
					<el-input @focus="IconVisible = true" v-model="ruleForm.icon" />
					<div
						v-if="IconVisible"
						style="
							position: absolute;
							width: 100%;
							background: #f0f0f0;
							z-index: 100;
							border: 1px solid #ccc;
							border-radius: 10px;
							padding: 6px;
							display: flex;
							flex-wrap: wrap;
							box-sizing: border-box;
						"
					>
						<span
							v-for="item in IconOptions"
							style="
								margin: 10px;
								display: flex;
								cursor: pointer;
								width: 32px;
								height: 32px;
								justify-content: center;
							"
							:key="item.value"
							@click="handleClick(item)"
						>
							<el-icon
								><Icon style="border: 1px solid #ccc" :size="32" :icon="item.value"
							/></el-icon>
						</span>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="排序" prop="orderNum">
				<el-input-number
					v-model="ruleForm.orderNum"
					:min="1"
					controls-position="right"
					size="large"
				/>
			</el-form-item>
			<el-form-item v-if="ruleForm.level != 3" label="是否显示" prop="shown">
				<el-radio-group v-model="ruleForm.shown" size="large">
					<el-radio-button :label="true"> 显示</el-radio-button>
					<el-radio-button :label="false">隐藏</el-radio-button>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)">
						{{ submitText }}
					</el-button>
					<el-button @click="resetForm(ruleFormRef)">Cancal</el-button>
				</el-form-item>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { postMenus, putMenus } from '../../../api/menus';
import type { FormInstance, FormRules } from 'element-plus';
import Tree from '../../../components/utils/Tree.vue';
import { globalInjectSymbol } from '../../../utils/symbolKey';
import Icon from '../../../components/utils/Icon.vue';
const dialogVisible = ref(false);
const tips = ref('');
const ruleFormRef = ref<FormInstance>();
const submitText = ref('');
const isCreated = ref(true);
const IconVisible = ref(false);
const emit = defineEmits<{ (e: 'getlist'): void }>();
const { successOrError } = inject(globalInjectSymbol) || {};
const IconOptions = [
	{
		value: 'HomeFilled',
		label: 'HomeFilled',
	},
	{
		value: 'Menu',
		label: 'Menu',
	},
	{
		value: 'Tools',
		label: 'Tools',
	},
	{
		value: 'Grid',
		label: 'Grid',
	},
	{
		value: 'StarFilled',
		label: 'StarFilled',
	},
	{
		value: 'Share',
		label: 'Share',
	},
	{
		value: 'HelpFilled',
		label: 'HelpFilled',
	},
	{
		value: 'Avatar',
		label: 'Avatar',
	},
	{
		value: 'WarnTriangleFilled',
		label: 'WarnTriangleFilled',
	},
	{
		value: 'Promotion',
		label: 'Promotion',
	},
	{
		value: 'UserFilled',
		label: 'UserFilled',
	},
	{
		value: 'QuestionFilled',
		label: 'QuestionFilled',
	},
	{
		value: 'DeleteFilled',
		label: 'DeleteFilled',
	},
	{
		value: 'CirclePlusFilled',
		label: 'CirclePlusFilled',
	},
	{
		value: 'MoreFilled',
		label: 'MoreFilled',
	},
	{
		value: 'Operation',
		label: 'Operation',
	},
	{
		value: 'Document',
		label: 'Document',
	},
	{
		value: 'TrendCharts',
		label: 'TrendCharts',
	},
	{
		value: 'Ticket',
		label: 'Ticket',
	},
	{
		value: 'Management',
		label: 'Management',
	},
	{
		value: 'FolderChecked',
		label: 'FolderChecked',
	},
	{
		value: 'DataAnalysis',
		label: 'DataAnalysis',
	},
	{
		value: 'Notebook',
		label: 'Notebook',
	},
];
const levelOption = ref([
	{
		label: '目录',
		value: 1,
	},
	{
		label: '菜单',
		value: 2,
	},
	{
		label: '按钮',
		value: 3,
	},
]);
let ruleForm: MenuItem = reactive({
	createBy: undefined,
	createdTime: undefined,
	description: undefined,
	href: undefined,
	icon: undefined,
	id: 0,
	components: undefined,
	premi: null,
	path: undefined,
	level: undefined,
	name: undefined,
	operatorId: undefined,
	orderNum: 1,
	parentId: 0,
	shown: true,
	updatedBy: undefined,
	updatedTime: undefined,
});

const componentsCheck = (rule: any, value: any, callback: any) => {
	const pattern = /^\//;
	if (pattern.test(value)) {
		callback();
	} else {
		callback(new Error('必须以 / 开头'));
	}
};

const rules = reactive<FormRules<MenuItem>>({
	name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
	level: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
	components: [{ required: true, validator: componentsCheck, trigger: 'blur' }],
	path: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
});
const formSize = ref<'default' | 'small' | 'large'>('default');
const resetForm = (formEl: FormInstance | undefined) => {
	dialogVisible.value = false;
	if (!formEl) return;
	formEl.resetFields();
};

const handleClick = (item: { value: string; label: string }) => {
	console.log(item);
	ruleForm.icon = item.value;
	IconVisible.value = false;
};

// 添加
const handleAdd = () => {
	resetForm(ruleFormRef.value);
	dialogVisible.value = true;
	tips.value = '添加菜单';
	submitText.value = 'Create';
	isCreated.value = true;
};
const submitForm = async (ref: FormInstance | undefined) => {
	if (!ref) return;
	ref.validate(async (valid) => {
		if (valid) {
			if (isCreated.value) {
				const res: AxiosResponse<{ code: number | string; message: string }> =
					await postMenus(ruleForm);
				if (successOrError) {
					successOrError(res);
					dialogVisible.value = false;
				}
				emit('getlist');
			} else {
				const res: AxiosResponse<{ code: number | string; message: string }> =
					await putMenus(ruleForm);
				if (successOrError) {
					successOrError(res);
					dialogVisible.value = false;
				}
				emit('getlist');
			}
		} else {
			console.log('error submit!');
			return false;
		}
	});
};

// 编辑
const handleEdit = (row: MenuItem) => {
	dialogVisible.value = true;
	tips.value = '编辑菜单';
	submitText.value = 'Update';
	isCreated.value = false;
	Object.assign(ruleForm, row);
};

defineExpose({
	handleAdd,
	handleEdit,
});
</script>

<style scoped>
.dialog-footer button:first-child {
	margin-right: 10px;
}
.dialog-footer {
	display: flex;
	justify-content: end;
}
</style>
